<template>
  <div>
    <h2>{{ person }}</h2>
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <!-- <h2>薪资：{{ salary }}k</h2> -->

    <!-- toRef 写法时，使用时候直接写引用的属性名字 -->
    <h2>薪资：{{ salary }}k</h2>
    <button @click="name += '~'">修改姓名</button>
    <button @click="age++">增长年龄</button>
    <button @click="salary++">涨薪</button>

    <!-- 如果使用了 toRefs 的话，子级属性获取数据需要写全了 -->
    <!-- <h2>薪资：{{ job.j1.salary }}k</h2>
    <button @click="name += '~'">修改姓名</button>
    <button @click="age++">增长年龄</button> -->
    

    <!-- 因为用了 toRefs 所以要写成这样了 -->
    <!-- <button @click="job.j1.salary++">涨薪</button> -->
  </div>
</template>

<script>
import { reactive, toRefs, toRef } from 'vue';

export default {
  name: 'test_toRef_toRefs',
  setup() {
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    })

    return {
      person,

      // toRef表示变成引用关系的，会关联上面的属性
      name: toRef(person, 'name'),
      age: toRef(person, 'age'),
      salary: toRef(person.job.j1, 'salary')

      // toRefs 顾名思义，就是一次处理所有的
      // ...toRefs(person)
    }
  }
}
</script>
